<template>
  <div>
    <h1>App 根组件 --- {{ color }}</h1>
    <button type="button" @click="color='blue'" >Toggle Blue</button>
    <hr />

    <level-two></level-two>
  </div>
</template>

<script>
import LevelTwo from './components/LevelTwo.vue'
import { computed } from 'vue'

export default {
  name: 'App',
  data(){
    return{
      color: 'red',
      count:100
    }
  },
  provide(){
    // 返回要共享的数据对象
    return {
      // 共享响应式数据
      color:computed(()=>this.color),
      count:this.count
    }
  },
  components: {
    LevelTwo
  }
}
</script>
